<template>
    <div class="comment">
        <div class="grade">
            <div class="grade-left">
                <p class="grade-count">{{seller.score}}</p>
                <p class="grade-type">综合评分</p>
                <p class="grade-info">高于周边商家{{ seller.rankRate }}%</p>
            </div>
            <div class="grade-right">
                <div class="service-attitude">
                    <span>服务态度</span>
                    <div class="stars">
                        <span
                        v-for="(item, index) in CserviceStars"
                        :key="index"
                        class="star-item"
                        :class="item"
                        >
                        </span>
                    </div>
                    <span class="service-attitude-score">{{ seller.serviceScore }}</span>
                </div>
                <div class="commodity-grade">
                    <span>商品评分</span>
                    <div class="stars">
                        <span
                        v-for="(item, index) in CfoodStars"
                        :key="index"
                        class="star-item"
                        :class="item"
                        >
                        </span>
                    </div>
                    <span class="commodity-grade-score">{{ seller.foodScore }}</span>
                </div>
                <p class="delivery-time">
                    <span>送达时间</span>
                    <span class="time">{{seller.deliveryTime}}分</span>
                </p>
            </div>
        </div>
        <div class="color-wall"></div>
        <div class="food-comment">
            <h2 class="food-comment-title">商品评价</h2>
            <div class="btn-wrapper">
              <a
              href="#/comment#/all"
              class="btn-item all"
              :class="{active:visibility == 'all'}"
              @click="getHash"
              >
                全部
                <span class="click-count">{{all}}</span>
              </a>
              <a
              href="#/comment#/recommend"
              class="btn-item recommend"
              :class="{active:visibility == 'recommend'}"
              @click="getHash"
              >
                推荐
                <span class="click-count">{{recommend}}</span>
              </a>
              <a
              href="#/comment#/taunt"
              class="btn-item taunt"
              :class="{active:visibility == 'taunt'}"
              @click="getHash"
              >
                吐槽
                <span class="click-count">{{taunt}}</span>
              </a>
            </div>
            <div class="select-comment-wrapper" @click="showOnly">
              <span
              class="comment-select-icon icon-check_circle"
              :class="{on:cur}"></span>
              <p class="select-comment">只看有内容的评价</p>
            </div>
        </div>
        <div class="user-comment-wrapper" ref='wrapper'>
            <div>
                <div class="user-comment-item" v-for="(item,index) in filterComments" :key="index">
                    <div class="user-comment-msg">
                        <div class="user-avatar-wrapper">
                            <img :src="item.avatar">
                        </div>
                        <div class="user-msg">
                            <span class="user-name">{{ item.username }}</span>
                            <div class="star-time">
                                <star :stars="item.score"></star>
                                <span class="arrive-time">{{item.deliveryTime}}分钟送达</span>
                            </div>
                        </div>
                        <div class="comment-time-wrapper">
                            <p class="comment-time">{{item.rateTime | timestampFormat}}</p>
                        </div>
                    </div>
                    <p class="user-comment">{{item.text}}</p>
                    <div class="food-type-wrapper">
                        <span class="praise" :class="{'icon-thumb_up':item.rateType==0,'icon-thumb_down':item.rateType==1}"></span>
                        <div class="food-type">
                            <div
                            class="food-type-item"
                            v-for="(food,i) in item.recommend" :key="i"
                            >
                            {{food}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import BScroll from 'better-scroll'
import Star from './Star'
export default {
  name: 'Comment',
  data () {
    return {
      seller: '',
      ratings: [],
      Sratings: [],
      cur: false,
      visibility: 'all'
    }
  },
  watch: {
  },
  components: {
    Star
  },
  computed: {
    CserviceStars () {
      const res = []
      const score = Math.floor(this.seller.serviceScore * 2) / 2
      const integer = Math.floor(score)
      const hasdecimals = score % 1 !== 0
      for (let i = 0; i < integer; i++) {
        res.push('star-on')
      }
      if (hasdecimals) {
        res.push('star-half')
      }
      while (res.length < 5) {
        res.push('star-off')
      }
      return res
    },
    CfoodStars () {
      const res = []
      const score = Math.floor(this.seller.serviceScore * 2) / 2
      const integer = Math.floor(score)
      const hasdecimals = score % 1 !== 0
      for (let i = 0; i < integer; i++) {
        res.push('star-on')
      }
      if (hasdecimals) {
        res.push('star-half')
      }
      while (res.length < 5) {
        res.push('star-off')
      }
      return res
    },
    CCommentStars (commentStars) {
      const res = []
      const score = Math.floor(commentStars * 2) / 2
      const integer = Math.floor(score)
      const hasdecimals = score % 1 !== 0
      for (let i = 0; i < integer; i++) {
        res.push('star-on')
      }
      if (hasdecimals) {
        res.push('star-half')
      }
      while (res.length < 5) {
        res.push('star-off')
      }
      return res
    },
    all () {
      return this.ratings.length
    },
    recommend () {
      const arr = []
      let arrCount = 0
      this.ratings.forEach(item => {
        if (item.rateType === 0) {
          arr.push(item)
        }
      })
      arrCount = arr.length
      return arrCount
    },
    taunt () {
      const arr = []
      let arrCount = 0
      this.ratings.forEach(item => {
        if (item.rateType === 1) {
          arr.push(item)
        }
      })
      arrCount = arr.length
      return arrCount
    },
    filterComments () {
      let arr = []
      switch (this.visibility) {
        case 'taunt':
          if (this.cur) {
            arr = this.ratings.filter(item => item.rateType === 1)
            return arr.filter(item => item.text !== '')
          } else {
            return this.ratings.filter(item => item.rateType === 1)
          }
        case 'recommend':
          if (this.cur) {
            arr = this.ratings.filter(item => item.rateType === 0)
            return arr.filter(item => item.text !== '')
          } else {
            return this.ratings.filter(item => item.rateType === 0)
          }
        default:
          if (this.cur) {
            return this.ratings.filter(item => item.text !== '')
          } else {
            return this.ratings
          }
      }
    }
  },
  methods: {
    getHash () {
      setTimeout(() => {
        this.visibility = this.current
      }, 100)
    },
    getSellerInfo () {
      // 获取seller数据
      axios.get('/api/seller').then((response) => {
        if (response.data.erron === 0) {
          this.seller = response.data.data
        }
      })
    },
    getRatingsInfo () {
      // 获取ratings数据
      axios.get('/api/ratings').then((response) => {
        if (response.data.erron === 0) {
          this.ratings = response.data.data
          this.Sratings = this.ratings
        }
      })
    },
    showOnly () {
      if (!this.cur) {
        this.cur = true
      } else {
        this.cur = false
      }
    }
  },
  mounted () {
    this.visibility = this.current
    this.getSellerInfo()
    this.getRatingsInfo()
    this.scroll = new BScroll(this.$refs.wrapper, {
      click: true
    })
    setTimeout(() => {
      this.scroll.refresh()
    }, 500)
  },
  filters: {
    timestampFormat (timestamp) {
      const date = new Date(timestamp)
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      const hour = date.getHours()
      const minute = date.getMinutes()
      return `${year}-${month}-${day} ${hour}:${minute}`
    }
  }
}
</script>

<style lang="stylus" scoped>
.comment{
  .grade{
    width 100%
    height 2.12rem
    padding .36rem
    display flex
    box-sizing border-box
    .grade-left{
      width 2.75rem
      border-right 1px solid rgba(147,153,159,.2)
      text-align center
      .grade-count{
        font-size .48rem
        line-height .7rem
        color rgb(255,153,0)
      }
      .grade-type{
        font-size .24rem
        color rgb(7,17,27)
      }
      .grade-info{
        font-size .2rem
        color rgb(147,156,159)
        margin-top .16rem
      }
    }
    .grade-right{
      padding .12rem .12rem .12rem .48rem
      flex 1
      font-size .24rem
      .service-attitude{
        display flex
        align-items: center
        .stars{
          margin-left .24rem
          width 2rem
          display flex
          justify-content space-between
          .star-item{
            display inline-block
            width 0.3rem
            height 0.3rem
            background-size cover
            background-repeat no-repeat
          }
          .star-on{
            background-image url('../../../assets/imgs/star24_on@2x.png')
          }
          .star-off{
            background-image url('../../../assets/imgs/star24_off@2x.png')
          }
          .star-half{
            background-image url('../../../assets/imgs/star24_half@2x.png')
          }
        }
        .service-attitude-score{
          margin-left .24rem
          color rgb(255,153,0)
        }
      }
      .commodity-grade{
        margin-top .16rem
        display flex
        align-items center
        .stars{
          margin-left .24rem
          display flex
          width 2rem
          justify-content space-between
          .star-item{
            display inline-block
            width 0.3rem
            height 0.3rem
            background-size cover
            background-repeat no-repeat
          }
          .star-on{
            background-image url('../../../assets/imgs/star24_on@2x.png')
          }
          .star-off{
            background-image url('../../../assets/imgs/star24_off@2x.png')
          }
          .star-half{
            background-image url('../../../assets/imgs/star24_half@2x.png')
          }
        }
        .commodity-grade-score{
          margin-left .24rem
          color rgb(255,153,0)
        }
      }
      .delivery-time{
        margin-top .16rem
        .time{
          margin-left .24rem
          color rgb(147,153,159)
        }
      }
    }
  }
  .color-wall{
    width 100%
    height .32rem
    background-color #f3f5f7
    border-top: 1px solid rgba(7,17,27,.1)
    border-bottom: 1px solid rgba(7,17,27,.1)
  }
  .food-comment{
    padding .36rem .36rem 0 .36rem
    border-bottom 1px solid rgba(7,17,27,.1)
    .food-comment-title{
      font-size .28rem
      color rgb(7,17,27)
    }
    .btn-wrapper{
      padding .36rem 0
      border-bottom 1px solid rgba(7,17,27,.1)
      overflow hidden
      .btn-item{
        display inline-block
        width 1.2rem
        height 0.64rem
        line-height .64rem
        text-align center
        float left
        margin-right .16rem
        border-radius .02rem
        font-size .24rem
        color rgb(7,17,27)
        .click-count{
          font-size .16rem
        }
      }
      .active{
        color white
      }
      .all{
        background rgb(0,160,220)
      }
      .recommend{
        background rgba(0,160,220,.2)
      }
      .taunt{
        background rgba(77,85,93,.2)
      }
    }
    .select-comment-wrapper{
      width 100%
      height 1rem
      .comment-select-icon{
        font-size .48rem
        display inline-block
        vertical-align middle
        color rgb(147,153,159)
      }
      .icon-check_circle:before{
        content: '\e902'
      }
      .select-comment{
        display inline
        font-size .24rem
        color rgb(147,153,159)
        line-height 1rem
      }
      .on{
        color green
      }
    }
  }
  .user-comment-wrapper{
    position fixed
    top 9rem
    bottom .96rem
    padding: 0 .36rem
    overflow hidden
    left 0
    right 0
    .user-comment-item{
      padding .36rem 0
      border-bottom 1px solid rgba(7,17,27,0.1)
      .user-comment-msg{
        display flex
        .user-name{
          font-size .2rem
          color rgb(7,17,27)
        }
        .user-avatar-wrapper{
          width .56rem
          height 0.56rem
          overflow hidden
          border-radius 50%
          img{
            width 100%
          }
        }
        .user-msg{
          margin-left .24rem
          .star-time{
            display flex
            margin-top .08rem
            .arrive-time{
              margin-left .12rem
              color rgb(147,153,159)
              font-size .2rem
              font-weight 200
            }
          }
        }
        .comment-time-wrapper{
          flex 1
          .comment-time{
              font-size .2rem
              font-weight 200
              color rgb(147,153,159)
              float right
          }
        }
      }
      .user-comment{
        margin .12rem 0 .16rem .8rem
        font-size .24rem
        color rgb(7,17,27)
      }
    }
  }
  .food-type-wrapper{
    margin 0 0 .36rem .8rem
    align-items top
    display flex
    .praise{
      font-size .24rem
    }
    .icon-thumb_up{
      color rgb(0,160,220)
    }
    .icon-thumb_down{
      color rgb(183,187,191)
    }
    .icon-thumb_up:before{
      content: '\e909'
    }
    .icon-thumb_down:before{
      content: '\e908'
    }
    .food-type{
      .food-type-item{
        display inline-block
        margin-left .16rem
        padding 0 .12rem
        width 1.5rem
        white-space:nowrap
        text-overflow:ellipsis
        overflow hidden
        border .01rem solid rgba(7,17,27,.1)
        border-radius .02rem
        font-size .18rem
        color rgb(147,153,159)
        line-height .32rem
      }
    }
  }
}
</style>
